<template>
  <view class="smart-page">
    <view class="smart-page-head">
      <view class="smart-page-head-title">video视频</view>
    </view>
    <view>
      <video id="myVideo" src="../../../static/video/video.mp4"
        danmu-btn="true" enable-danmu="true" :danmu-list="video_danmu_list"></video>
    </view>
    <view class="input_box">
      <input placeholder="评论内容..." v-model="inputValue">
    </view>
    <view class="btn_box">
      <button type="primary" @click="sendMsg">发送弹幕</button>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      inputValue: '', 
      videoContext: '', 
      video_danmu_list: [{
        text: '你好',
        time: 1,
        color: '#abc342'
      }, {
        text: '我很好，你好吗？',
        time: 2,
        color: '#ff5500'
      }, {
        text: '我也很好！',
        time: 3,
        color: '#0000ff'
      }]
    };
  },
  onReady: function() {
    this.videoContext = uni.createVideoContext('myVideo');
  },
  methods: {
    /*发送弹幕*/
    sendMsg() {
      console.log('弹幕内容: ' + this.inputValue);
      this.videoContext.sendDanmu({
        text: this.inputValue,
        color: 'red'
      })
    }
  }
}
</script>
<style>
.input_box{background-color: #CCC9CA;}
.btn_box{margin-top: 20upx;}
</style>